<template>
    <div class="content">
        <el-row class="detail_mian">
            <el-col :span="12" class="mian_block">
                <el-row class="title_block bill_info hpx-title-border">
                    <span class="title_text">票据信息</span>
                </el-row>
                <el-form label-width="120px" size="mini" class="detail_info">
                    <el-form-item label="票据号:">{{model.bill_number}}</el-form-item>
                    <el-form-item label="承兑人全称:">{{model.acceptor_name}}</el-form-item>
                    <el-form-item label="承兑机构:">{{model.acceptor_type_name}}</el-form-item>
                    <el-form-item label="票面金额:" class="hpx-red-tips"><span class="remind">{{model.bill_sum_price}}元</span></el-form-item>
                    <el-form-item label="到期时间:">{{model.bill_deadline_time | formatDate}}(<span v-if="model.remaining_day != null">剩余{{model.remaining_day}}天</span><span v-if="model.remaining_day == null">已过期</span>)</el-form-item>
                    <el-form-item label="汇票瑕疵:" class="hpx-red-tips">{{formatArr}}</el-form-item>
                    <el-form-item label="背书次数:">{{model.endorsement_number}}</el-form-item>
                    <el-row class="imgs">
                        <el-col :span="5" :offset="1" v-if="model.bill_front_photo_id">
                            <!-- <img :src="model.bill_front_photo_path" alt=""> -->
                            <ImageZoom
                                :width='228'
                                :height='154'
                                mode='preview'
                                :image="model.bill_front_photo_path"
                            ></ImageZoom>
                            <el-row class="tag">票据正面</el-row>
                        </el-col>
                        <el-col :span="5" :offset="1" v-if="model.bill_back_photo_id1">
                            <!-- <img :src="model.bill_back_photo_path1" alt=""> -->
                            <ImageZoom
                                :width='228'
                                :height='154'
                                mode='preview'
                                :image="model.bill_back_photo_path1"
                            ></ImageZoom>
                            <el-row class="tag">背书面1</el-row>
                        </el-col>
                        <el-col :span="5" :offset="1" v-if="model.bill_back_photo_id2">
                            <!-- <img :src="model.bill_back_photo_path2" alt=""> -->
                            <ImageZoom
                                :width='228'
                                :height='154'
                                mode='preview'
                                :image="model.bill_back_photo_path2"
                            ></ImageZoom>
                            <el-row class="tag">背书面2</el-row>
                        </el-col>
                    </el-row>
                </el-form>
            </el-col>
            <el-col :span="6" class="mian_block">
                <el-row class="title_block bill_info hpx-title-border">
                    <span class="title_text">订单信息</span>
                </el-row>
                <el-form label-width="120px" size="mini" class="detail_info">
                    <el-form-item label="订单号码:">{{model.order_number}}</el-form-item>
                    <el-form-item label="贴现利率:" class="hpx-red-tips">{{model.order_rate}}{{model.bill_type_id == 101 ? '%' : '‰'}}</el-form-item>
                    <el-form-item label="每十万加:" class="hpx-red-tips">{{model.order_every_plus ? model.order_every_plus : '--'}}{{model.order_every_plus ? '元' : ''}}</el-form-item>
                    <el-form-item label="竞价方式:">{{model.bidding_mode == 3210 ? '一口价' : '自由竞价'}}</el-form-item>
                    <el-form-item label="发布期限:">T+{{model.trade_appoint_day}}</el-form-item>
                    <!-- <el-form-item label="买方服务费:" class="hpx-red-tips">{{model.commission}}个汇票豆</el-form-item> -->
                    <el-form-item label="贴现金额:" class="hpx-red-tips remind"><span class="remind">{{model.order_total_price}}元</span></el-form-item>
                    <el-form-item label="生成时间:">{{model.order_time | formatDay}}</el-form-item>
                </el-form>
            </el-col>
            <el-col :span="6" class="mian_block">
                <el-row class="title_block bill_info hpx-title-border">
                    <span class="title_text">订单状态</span>
                </el-row>
                <div class="order_status" v-if="model.order_status_id == 804 || model.order_status_id == 805">
                    <el-row class="text_center">交易已确认</el-row>
                    <el-row class="text_center remind hpx-red-tips">待买方付款</el-row>
                    <el-row class="text_center hpx-red-tips"><i class="iconfont icon-daojishi1"></i>
                        已等待{{waiteH}}{{waiteHText}}{{this.waiteTimeForm.waitdateM}}分钟{{this.waiteTimeForm.waitdateS}}秒
                    </el-row>
                </div>
                <div class="order_status" v-if="model.order_status_id == 806">
                    <el-row class="text_center">买方已付款</el-row>
                    <el-row class="text_center remind hpx-red-tips">请完成背书</el-row>
                    <el-row class="text_center hpx-red-tips"><i class="iconfont icon-daojishi1"></i>
                        已等待{{waiteH}}{{waiteHText}}{{this.waiteTimeForm.waitdateM}}分钟{{this.waiteTimeForm.waitdateS}}秒
                    </el-row>
                    <el-row class="bank_info_box">
                        <div class="enclose_title">背书信息</div>
                        <el-form label-width="90px" size="mini" class="bank_box_con">
                            <el-form-item label="机构名称：">{{model.receiver_enterprise_name}}</el-form-item>
                            <el-form-item label="开户行：">{{model.receiver_account_bank}}</el-form-item>
                            <el-form-item label="账户：">{{model.receiver_account_number}}</el-form-item>
                            <el-form-item label="联行号：">{{model.receiver_account_bank_number}}</el-form-item>
                        </el-form>
                    </el-row>
                    <el-row class="text_center">
                        <el-button type="primary" @click="endorse()" class="dialog-button">确认背书</el-button>
                    </el-row>
                </div>
                <div class="order_status" v-if="model.order_status_id == 807">
                    <el-row class="text_center remind">已背书</el-row>
                    <el-row class="text_center">待买方签收</el-row>
                    <el-row class="text_center hpx-red-tips"><i class="iconfont icon-daojishi1"></i>
                        已等待{{waiteH}}{{waiteHText}}{{this.waiteTimeForm.waitdateM}}分钟{{this.waiteTimeForm.waitdateS}}秒
                    </el-row>
                </div>
                <div class="order_status" v-if="model.order_status_id == 808">
                    <el-row class="text_center remind">已签收</el-row>
                    <el-row class="text_center">待系统核验解冻</el-row>
                    <el-row class="text_center hpx-red-tips"><i class="iconfont icon-daojishi1"></i>
                        已等待{{waiteH}}{{waiteHText}}{{this.waiteTimeForm.waitdateM}}分钟{{this.waiteTimeForm.waitdateS}}秒
                    </el-row>
                </div>
                <div class="order_status" v-if="model.order_status_id >= 810 && model.order_status_id <= 813">
                    <el-row class="text_center hpx-success"><i class="iconfont icon-wancheng"></i></el-row>
                    <el-row class="text_center">恭喜您交易完成</el-row>
                    <el-row class="text_center" v-if="model.order_status_id == 810">
                        <el-button type="primary" plain size="small" @click="evaluate(model,null)">评价</el-button>
                    </el-row>
                    <el-row class="text_center" v-if="model.order_status_id == 811 || model.order_status_id == 812">
                        <el-button type="primary" plain size="small" @click="evaluate(model,1)">查看评价</el-button>
                        <el-button type="primary" plain size="small" @click="evaluate(model,0)" v-if="model.order_status_id == 812">评价</el-button>
                    </el-row>
                    <el-row class="text_center" v-if="model.order_status_id == 813">
                        <el-button type="primary" plain size="small" @click="evaluate(model,null)">查看评价</el-button>
                    </el-row>
                    <el-row class="text_center">
                        <el-button type="primary" plain size="small" @click="downContract()">下载合同</el-button>
                    </el-row>
                    <el-row class="text_center" v-if="this.customerInfo.isOperate != 1">
                        <span class="sell_order_xingye">请登录<el-button type="text" @click="xingyeSingIn()">兴业数金执剑人见证代管系统</el-button>提现</span>
                    </el-row>
                </div>
                 <div class="order_status" v-if="model.order_status_id > 813">
                    <el-row class="text_center" v-if="model.order_status_id == 814">
                        申请退款中
                    </el-row>
                    <el-row class="text_center" v-if="model.order_status_id == 815">
                        退款结束
                    </el-row>
                    <el-row class="text_center" v-if="model.order_status_id == 816">
                        交易中止
                    </el-row>
                </div>
            </el-col>
        </el-row>
        <!-- 背书弹框 -->
        <DialogInput ref="endorseDialog" title="卖方确认背书操作">
            <div class="rem-dialog-con">
                <el-row class="warning hpx-red-tips"><i class="iconfont icon-tishi"></i></el-row>
                <el-row class="warning">是否确认背书?</el-row>
                <el-row>请确认买票方付款后，再到网银去背书，否则后果自负!</el-row>
            </div>
            <span slot="Remfooter">
                <el-button @click="closeDialog()" type="info" class="hpx-cancel-color dialog-button">否</el-button>
                <el-button @click="confirmEndorse()" type="primary" class="dialog-button">是</el-button>
            </span>
        </DialogInput>
        <!-- 背书成功 -->
        <DialogInput ref="endorseSuccess" title="提醒">
            <div class="rem-dialog-con">
                <el-row class="hpx-success"><i class="iconfont icon-wancheng"></i></el-row>
                <el-row>背书成功!</el-row>
            </div>
            <span slot="Remfooter">
                <el-button @click="closeDialog()" type="primary" class="dialog-button">我知道了</el-button>
            </span>
        </DialogInput>
        <!-- 评价弹框 -->
        <DialogEvaluate ref="evaluate" @submitEvaluate="submitEvaluate" :channel="'seller'"/>
        <!-- <DialogInput ref="evaluate" title="交易评价">
            <div class="rem-dialog-con text_left">
                <GiveMark :score="0" :isDisabled="false" @changeScore="changeScore"/>
                <el-row class="row_text hpx-label">评价内容</el-row>
                <el-input type="textarea" v-model="evaluateWord" placeholder="请在此输入您对卖方的具体评价(如价格、打款、信用等方面)"></el-input>
            </div>
            <span slot="Remfooter">
                <el-button @click="closeDialog()" type="info" class="hpx-cancel-color dialog-button">取消</el-button>
                <el-button @saveInfo="submitEvaluate()" type="primary" class="dialog-button">提交评价</el-button>
            </span>
        </DialogInput> -->
        <!-- 查看评价弹框 -->
        <!-- <DialogInput ref="lookEvaluate" title="评价详情">
            <div class="rem-dialog-con text_left">
                <FormTitle title="卖方给您的评价"/>
                <GiveMark :score="4" :isDisabled="true" @changeScore="changeScore"/>
                <el-row class="row_text hpx-label">评价内容</el-row>
                <el-row>打款有点儿慢！</el-row>
                <FormTitle title="您给卖方的评价"/>
                <GiveMark :score="4" :isDisabled="true" @changeScore="changeScore"/>
                <el-row class="row_text hpx-label">评价内容</el-row>
                <el-row>价格好</el-row>
            </div>
            <span slot="Remfooter">
                <el-button @click="closeDialog()" type="primary" class="dialog-button">关闭</el-button>
            </span>
        </DialogInput> -->
    </div>
</template>

<script lang="ts">
    import {Vue, Component, Prop, Watch} from 'vue-property-decorator'
    import Table from '@component/common/HpxTable.vue'
    import DialogInput from '@component/common/DialogInput.vue'
    import FormTitle from '@component/common/FormTitle.vue'
    import GiveMark from '@component/common/GiveMark.vue'
    import DialogEvaluate from '@component/common/DialogEvaluate.vue'
    import { mapGetters, mapState, mapActions } from 'vuex';
    import { xingyeURL } from '@/util/constant';
    import ImageZoom from '@component/common/ImageZoom.vue'
    @Component({
        components:{
            Table,
            DialogInput,
            FormTitle,
            GiveMark,
            DialogEvaluate,
            ImageZoom
        },
        computed:{
            ...mapState([
                'userInfo'
            ])
        },
        methods: {
            ...mapActions([
                'getAllTips'
            ])
        }
    })
    export default class OrderDetail extends Vue {
        @Prop(String) id!:string

        timer:any = null
        //订单详情数据
        model:any = {}
        waiteTimeForm: Object = {
            difference: '',
            waitTimeD: '',
            waitTimeH: '',
            waitdateM: '',
            waitdateS: '',
            waitdate: ''
        }
        @Watch('id')
        onIdChanged(val: string, oldVal: string) {
            this.getDetailData()
        }
        //获取订单详情
        async getDetailData () {
            let res = await this.$http.get(`orders/order/${this.$route.params.id}`)
            if(res.status == 200){
                this.model = res.data
            }
        }
        async getSystemTime () {
            let res = await this.$http.get('tools/systemTime')
            if(res.status == 200){
                let newSystemDate = new Date().getTime();
                this.waiteTimeForm.difference = newSystemDate - res.data;
            }
        }
        async getWaitTime () {
            let newdate = new Date().getTime();
            if (this.waiteTimeForm.difference >= 0) {
                if(this.model.order_status_id == 804){
                    this.waiteTimeForm.waitdate = newdate - this.model.order_time - this.waiteTimeForm.difference;
                }else {
                    this.waiteTimeForm.waitdate = newdate - this.model.order_update_time - this.waiteTimeForm.difference;
                }
            } else {
                if(this.model.order_status_id == 804){
                    this.waiteTimeForm.waitdate = newdate - this.model.order_time + this.waiteTimeForm.difference;
                }else {
                    this.waiteTimeForm.waitdate = newdate - this.model.order_update_time + this.waiteTimeForm.difference;
                }
            }
            if(this.waiteTimeForm.waitdate > 1000){
                let waitTime = new Date(this.waiteTimeForm.waitdate);
                this.waiteTimeForm.waitTimeD = waitTime.getDate();
                if (this.waiteTimeForm.waitTimeD > 2) {
                    this.waiteTimeForm.waitTimeH = waitTime.getHours() - 8 + (this.waiteTimeForm.waitTimeD - 1) * 24;
                } else if (this.waiteTimeForm.waitTimeD > 1) {
                    this.waiteTimeForm.waitTimeH = waitTime.getHours() - 8 + 24;
                } else {
                    this.waiteTimeForm.waitTimeH = waitTime.getHours() - 8;
                }
                this.waiteTimeForm.waitdateM = waitTime.getMinutes();
                this.waiteTimeForm.waitdateS = waitTime.getSeconds();
            }else {
                this.waiteTimeForm.waitTimeH = 0;
                this.waiteTimeForm.waitdateM = 0;
                this.waiteTimeForm.waitdateS = 0;
            }
        }
        get formatArr () {
            return this.model.bill_flaw_names ? this.model.bill_flaw_names.join('，') : ''
        }
        get waiteH () {
            return this.waiteTimeForm.waitTimeH == '' ? '' : this.waiteTimeForm.waitTimeH
        }
        get waiteHText () {
            return this.waiteTimeForm.waitTimeH == '' ? '' : '小时'
        }
        endorse () {
            this.$refs['endorseDialog'].openDialog();
        }
        async confirmEndorse () {
            let res = await this.$http.put(`orders/orderEndorsement/${this.model.id}`)
            if (res.status < 300){
                this.getDetailData()
                this.getAllTips()
                this.$refs['endorseDialog'].closeDialog();
                this.$refs['endorseSuccess'].openDialog();
            }
        }

        //评价弹框
        evaluate (model:any,status:any) {
            if(model.order_status_id == 810){
                this.$refs['evaluate'].addEvaluateDialog();
            }else if(model.order_status_id == 811 || model.order_status_id == 812){
                if(status == 1)
                    this.$refs['evaluate'].lookEvaluateDialog(model)
                if(status == 0)
                    this.$refs['evaluate'].addEvaluateDialog();
            }else{
                this.$refs['evaluate'].lookEvaluateDialog(model);
            }
        }
        //提交评价
        async submitEvaluate (info) {
            let params = {
                ...info,
                orderId: this.model.id,
                drawerId: this.model.drawer_id
            }
            let res = await this.$http.post('order/appraisal/drawer',params)
            if(res.status == 200){
                this.getDetailData()
                this.$refs['evaluate'].closeDialog();
                this.$alert(res.msg,'提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box'
                })
            }
        }
        closeDialog () {
            this.$refs['endorseDialog'].closeDialog();
            this.$refs['endorseSuccess'].closeDialog();
        }
        // 下载合同
        downContract () {
            this.getDownload()
        }
        async getDownload () {
            let downURL = await this.$http.get(`paying/xingyeapi/econtract/downloadContract/${this.model.id}`)
            // window.location.href = downURL.data.file_path
            setTimeout(() => {
                window.open(downURL.data.file_path)
            },500)
        }
        customerInfo: any = {};
        //查询用户基本信息
        async getCustomerInfo () {
            let res = await this.$http.get(`customers/customer/${this.userInfo.customer_id}`)
            if(res.status == 200){
                this.customerInfo = res.data
            }
        }
        // 登录兴业执剑人系统
        xingyeSingIn () {
            window.open(xingyeURL.URL+`/${this.userInfo.corpNo}`);
        }
        mounted() {
            this.getDetailData()
            this.getSystemTime()
            this.getCustomerInfo()
            this.timer = setInterval(()=>{
                this.getWaitTime();
            },1000)
        }
        destroyed () {
            clearInterval(this.timer)
        }
    }
</script>

<style lang="scss" scoped>

    .enterprise_info{
        height: 50px;
        line-height: 50px;
    }
    .bill_info{
        height: 30px;
        line-height: 30px;
    }
    .detail_mian{
        .mian_block{
            height: 594px;
        }
    }
    .el-form-item__label{
        color: $__color-label !important;
    }
    .el-form-item--mini .el-form-item__content, .el-form-item--mini .el-form-item__label {
        line-height: 20px !important;
    }
    .bank_info_box {
        border: 1px solid $__color-border;
        border-radius: 4px;
        margin: 20px 6% 10px 6%;
        /*padding-bottom: 18px;*/
    }
    .bank_box_con {
        padding: 8px 0 16px 0;
        .el-form-item--mini.el-form-item {
            margin-bottom: 5px;
        }
    }
    .enclose_title {
        height: 26px;
        line-height: 26px;
        padding-left: 10px;
        font-size: 16px;
    }

    .company{
        text-align: center;
    }
    .order_status{
        margin-top: 100px;
        .hpx-success .iconfont{
            font-size: 60px;
        }
    }
    .remind{
        font-size: 20px;
    }
    .row_text{
        line-height: 50px;
    }
    .sell_order_xingye {
        font-size: $__little-font-size;
        .el-button--text {
            color: $__color-link !important;
        }
    }
</style>